<template lang='pug'>
.tool-content
    .tool-bar
        .tool-item(@click="homeView();openNotify('地图重定向')")
            img.home-view(:src="require(`@/assets/toolbar/home.svg`)" style="width:21px;height:21px")
        .tool-item(:class="{active:cur === 'distance'}" @click="toolChange('distance')")
            img(:src="require(`@/assets/toolbar/distance${cur==='distance'?'-active':''}.svg`)")
        .tool-item(:class="{active:cur === 'area'}" @click="toolChange('area')")
            img(:src="require(`@/assets/toolbar/area${cur==='area'?'-active':''}.svg`)")

</template>

<script>
import { fromLonLat } from 'ol/proj'
import { mapState } from 'vuex'

import olUtils from '@/scripts/olBasicUtils'

export default {
  name: 'ToolBar',
  computed: {
    ...mapState({ // 这里的...是超引用，ES6的语法，意思是state里有多少属性值我可以在这里放多少属性值
      isHideLeft: state => state.pageStatus.isHideLeft
    })
  },
  data () {
    return {
      cur: '',
      modelSelectorShow: false
    }
  },
  watch: {
  },
  mounted () {

  },
  methods: {
    // 单击工具
    toolChange (toolName) {
      const isNew = this.cur !== toolName // true表示开启
      this.cur = this.cur === toolName ? '' : toolName // 控制高亮
    },

    // 重定向
    homeView () {
      if (this.isHideLeft) {
        olUtils.MapAnimateTo(fromLonLat([103.103, 31.990]), 400, 4)
      } else {
        olUtils.MapAnimateTo(fromLonLat([82.009,31.990]), 400, 4)
      }
    },
    // 通知
    openNotify (msg = '操作提示') {
      if (this.notify) this.notify.close()
      this.notify = this.$notify({
        customClass: 'custom-notify',
        message: msg,
        // type: 'success',
        duration: 1200, // 自动关闭时间
        offset: 78,
        showClose: false // 关闭按钮
      })
    }

  },
  beforeDestroy () {
    measureUtils.clear()
    this.$bus.$off('deleteMeasure')
  }

}
</script>

<style lang="stylus" scoped>
    .tool-bar
        position absolute
        width 40px
        bottom 12px
        // top: 50%;
        // transform: translate(0px, -50%);
        right 16px
        // background-color #fff
        border-radius 2px
        z-index 200
        display: flex;
        flex-direction: column;
        align-items: center;
        .short-line
            width: 27px;
            height: 0px;
            border-bottom: 1px solid #60626680;
        .tool-item
            box-shadow #6666668c 0px 0px 4px
            background-color #fff
            border-radius 50%
            display: flex;
            justify-content: center;
            align-items: center;
            margin 8px 0
            width 40px
            height 40px
            cursor pointer
            &.active
                background-color #3296fa
                border-radius 50%
            &:last-child
                &::after
                    border 0px
            img
                width 20px
                height 20px

.home-view:hover
        content url('../assets/toolbar/home-active.svg')
</style>
